<template>
  <div class="container">
    <div id="app"></div>
    <canvas id="deck-canvas"></canvas>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { MVTLayer } from '@deck.gl/geo-layers';
// import { BitmapLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';

/**
 * 使用deck画矢量图
 */

export default {
  data() {
    return {
      // 历史数据
      historyData: null,
      // map 地图对象实例
      map: null,
    };
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw';

      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [113.97923191113188, 22.589860256941634],
        zoom: 12,
      });

      this.map = map;
      window.map = map;

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });

      const tileLayer = new MapboxLayer({
        type: MVTLayer,
        id: 'tile-layer',
        // data: 'http://192.168.101.147:8081/tile/{z}/{x}/{y}',
        data: 'https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt',
        // data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
        filled: true,
        // pointRadiusMinPixels: 35,
        // pointRadiusScale: 10,
        // getPointRadius: 30,
        tileSize: 256,
        // pointType: 'circle+text+icon',
        // pickable: true,
        onClick: (info) => {
          console.log('info :>> ', info);
        },
        // getPosition: (f) => f.properties.coordinates,
        // onTileError: (error) => {
        //   console.log(error);
        // },
        // getPointRadius: (f) => 11 - f.properties.scalerank,
        getFillColor: [255, 123, 0, 255],
      });

      // const tempLayer = new TileLayer({
      //   id: 'tile-layer',
      //   data: 'http://192.168.101.147:8089/tile/{z}/{x}/{y}',
      // });

      // console.log('tempLayer :>> ', tempLayer);

      window.tileLayer = tileLayer;

      map.on('load', function () {
        map.addLayer(tileLayer);
      });
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* 弹出层样式 */
.mapboxgl-popup {
  padding-bottom: 5px;
}
/* 控制关闭按钮 */
.mapboxgl-popup-close-button {
  /* display: none; */
}
</style>
